<template>
    <div class="page">
        <nav-bar>
            <!-- 具名插槽 -->
            <template #left>
                <div class="lefts">
                    <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
                </div>
            </template>
            <template #center>
                <div>
                    {{ city ? city.name : "" }}
                </div>
            </template>
            <template #right>
                <div class="rights" @click="$router.go(-1)">
                    切换城市
                </div>
            </template>
        </nav-bar>
        <div class="search">
            <div class="input">
                <input type="search" placeholder="输入学校、商务楼、地址" v-model="keywords">
            </div>
            <div class="btn" @click="submit">
                提交
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in addressList" :key="index" class="address" @click="goHome(item.geohash, item)">
                <div class="name">
                    {{ item.name }}
                </div>
                <div class="address_item">
                    {{ item.address }}
                </div>
            </div>
            <div v-show="isShow" style="padding: 10px; font-size: 14px; color: #666;">
                很抱歉！无搜索结果
            </div>
        </div>
        <div class="searchData" v-show="addressList.length == 0 && !isShow">
            <div class="title">
                搜索历史:
            </div>
            <div class="content">
                <div v-for="(item, index) in historyList" :key="index" class="address"
                    @click="goHome(item.geohash, item)">
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <div class="address_item">
                        {{ item.address }}
                    </div>
                </div>
            </div>
            <div class="clear" @click="clear" v-if="historyList.length != 0">
                清空所有
            </div>
        </div>
    </div>
</template>
<script>
import { getCityInfo, searchAddress } from '@/api/city'
import { Toast } from 'vant';
export default {
    data() {
        return {
            city: null,
            keywords: "",
            addressList: [],
            // 历史搜索记录
            historyList: [],
            isShow: false
        }
    },
    async created() {
        // 获取本地搜索列表
        let searchData = localStorage.getItem("historySearch");
        if (searchData == null) {
            this.historyList = [];
        } else {
            this.historyList = JSON.parse(searchData)
        }
        // 获取动态路由的动态参数
        let id = this.$route.params.id;
        let res = await getCityInfo(id);

        this.city = res.data;
    },
    methods: {
        async submit() {
            if (this.keywords == "") {
                Toast("请您输入内容")
                return;
            }
            // 获取请求参数
            let data = {
                city_id: this.city.id,
                keyword: this.keywords,
                type: "search"
            }
            // 发送请求搜索地址
            let res = await searchAddress(data);
            if (res.data.length == 0) {
                // 表示暂无数据
                this.isShow = true
                return
            }
             this.addressList = res.data;
             this.isShow = false;
        },
        goHome(geohash, item) {
            this.$store.commit("savegeohash",geohash);
            localStorage.setItem("geohash",geohash)
            if (this.historyList.length == 0) {
                this.historyList.push(item);
            } else {
                let index = this.historyList.findIndex(items => {
                    return items.geohash == item.geohash
                })
                if (index == -1) {
                    this.historyList.push(item);
                }
            }
            // 将搜索记录存储到本地
            localStorage.setItem("historySearch", JSON.stringify(this.historyList))
            this.$router.push({
                path: "/home?geohash=" + geohash
            })
        },
        clear() {
            localStorage.removeItem("historySearch");
            this.historyList = [];
        }
    },
    watch: {
        keywords(newVal) {
            if (newVal == "") {
                this.addressList = []
                this.isShow = false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    .lefts {
        font-size: 20px;
    }

    .rights {
        font-size: 14px;
    }

    .search {
        background: #fff;
        font-size: 15px;
        margin-top: 10px;
        padding: 10px 20px;
        border-bottom: 2px solid #e4e4e4;

        input {
            width: 100%;
            height: 30px;
            padding: 0 5px;
            color: #666;
            border: 1px solid #e4e4e4;
            border-radius: 3px;
        }

        .btn {
            text-align: center;
            background: #3190e8;
            color: #fff;
            padding: 6px 0;
            border-radius: 3px;
            margin-top: 10px;
        }
    }

    .content {

        background: #fff;
        font-size: 15px;

        .address {
            padding: 15px 20px;
            border-top: 1px solid #e4e4e4;

            .name {
                color: #333;
                font-size: 16px;
            }

            .address_item {
                color: #b4b4b4;
                font-size: 14px;
                margin-top: 10px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.searchData {
    .title {
        padding: 5px 10px;
        font-size: 14px;
        color: #666;
    }

    .clear {
        width: 100%;
        text-align: center;
        font-size: 17px;
        color: #666;
        padding: 10px 0;
        background: #fff;
        border-top: 1px solid #e4e4e4;
    }
}
</style>